<template>
  <div>
    <div class="floor">
      <ul>
        <li
          v-for="(item,index) of floortop"
          :key="item.id"
          :class="{'activeB':isActiveB==index}"
          @click="switchTo(index,item.path)"
        >
          <img :src="item.path == $route.path ? item.url[1] : item.url[0]" alt />
          <p>{{item.name}}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      floortop: [
        {
          url: [
            "https://wp.sharkshopping.com/static/img/toolbaricon_home.png",
            "https://wp.sharkshopping.com/static/img/toolbaricon_home_full.png"
          ],
          name: "推荐",
          path: "/home"
        },
        {
          url: [
            "https://wp.sharkshopping.com/static/img/toolbaricon_classify.png",
            "https://wp.sharkshopping.com/static/img/toolbaricon_classify_full.png"
          ],
          name: "逛",
          path: "/list"
        },
        {
          url: [
            "https://wp.sharkshopping.com/static/img/toolbaricon_shoppingcart.png",
            "https://wp.sharkshopping.com/static/img/toolbaricon_shoppingcart_full.png"
          ],
          name: "购物车",
          path: "/cart"
        },
        {
          url: [
            "https://wp.sharkshopping.com/static/img/toolbaricon_profile.png",
            "https://wp.sharkshopping.com/static/img/toolbaricon_profile_full.png"
          ],
          name: "我的",
          path: "/mine"
        }
      ],
      isActiveB: 0,
    };
  },
  methods: {
    switchTo(index, path) {
      this.isActiveB = index;
      window.console.log(this.isActiveB==index);
      // window.console.log(this.isActiveB);
      // window.console.log(this.$router)
      this.$router.push(path);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.floor {
  height: 1.875rem;
  ul {
    height: 100%;
    display: flex;
    justify-content: space-around;
    line-height: 1rem;
    li {
      height: 0.9375rem;
      list-style: none;
      margin-top: 0.625rem;
      img {
        width: 1.5625rem;
        height: 1.5625rem;
      }
      p {
        font-size: 0.625rem;
      }
    }
    .activeB {
      color: #931db3;
    }
  }
}
</style>


